<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:include="include :: header('云游展厅管理')" />
  </head>
  <body class="gray-bg">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="formId">
            <div class="select-list">
              <ul>
                <li>
                  <label>展厅标题：</label>
                  <input
                    type="text"
                    name="title"
                    placeholder="请输入展厅标题"
                  />
                </li>
                <li>
                  <label>状态：</label>
                  <select
                    name="status"
                    th:with="type=${@dict.getType('sys_normal_disable')}"
                  >
                    <option value="">所有</option>
                    <option
                      th:each="dict : ${type}"
                      th:text="${dict.dictLabel}"
                      th:value="${dict.dictValue}"
                    ></option>
                  </select>
                </li>
                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="$.table.search()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="$.form.reset()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
          <a
            class="btn btn-success"
            onclick="$.operate.add()"
            shiro:hasPermission="hui:interact:exhibition:add"
          >
            <i class="fa fa-plus"></i> 添加
          </a>
          <a
            class="btn btn-primary single disabled"
            onclick="$.operate.edit()"
            shiro:hasPermission="hui:interact:exhibition:edit"
          >
            <i class="fa fa-edit"></i> 修改
          </a>
          <a
            class="btn btn-danger multiple disabled"
            onclick="$.operate.removeAll()"
            shiro:hasPermission="hui:interact:exhibition:remove"
          >
            <i class="fa fa-remove"></i> 删除
          </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
          <table id="bootstrap-table"></table>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
      var editFlag =
        /*[[${@permission.hasPermi('hui:interact:exhibition:edit')}]]*/ "hidden";
      var viewFlag =
        /*[[${@permission.hasPermi('hui:interact:exhibition:view')}]]*/ "hidden";
      var removeFlag =
        /*[[${@permission.hasPermi('hui:interact:exhibition:remove')}]]*/ "hidden";
      var statusDatas = /*[[${@dict.getType('sys_normal_disable')}]]*/ [];
      var prefix = ctx + "hui/interact/exhibition";

      $(function () {
        var options = {
          url: prefix + "/list",
          createUrl: prefix + "/add",
          updateUrl: prefix + "/edit/{id}",
          removeUrl: prefix + "/remove",
          viewUrl: prefix + "/view/{id}",
          exportUrl: prefix + "/export",
          modalName: "云游展厅",
          columns: [
            {
              checkbox: true,
            },
            {
              field: "id",
              title: "展厅ID",
              visible: false,
            },
            {
              field: "title",
              title: "展厅标题",
            },
            {
              field: "description",
              title: "展厅介绍",
              formatter: function (value, row, index) {
                if (value && value.length > 50) {
                  return value.substring(0, 50) + "...";
                }
                return value || "";
              },
            },
            {
              field: "coverUrl",
              title: "封面图片",
              formatter: function (value, row, index) {
                return $.table.imageView(ctx + value);
              },
            },
            {
              field: "videoUrl",
              title: "视频资源",
              formatter: function (value, row, index) {
                if (!value) {
                  return '<span class="text-muted">无视频资源</span>';
                }

                var playButton =
                  '<button class="btn btn-info btn-xs" onclick="playVideo(\'' +
                  ctx +
                  value +
                  "')\">" +
                  '<i class="fa fa-play"></i> 播放</button>';
                var downloadButton =
                  '<a href="' +
                  ctx +
                  value +
                  '" download class="btn btn-success btn-xs" style="margin-left: 5px;">' +
                  '<i class="fa fa-download"></i> 下载</a>';

                return "<div>" + playButton + downloadButton + "</div>";
              },
            },
            {
              field: "status",
              title: "状态",
              align: "center",
              formatter: function (value, row, index) {
                return $.table.selectDictLabel(statusDatas, value);
              },
            },
            {
              field: "createTime",
              title: "创建时间",
              sortable: true,
            },
            {
              title: "操作",
              align: "center",
              formatter: function (value, row, index) {
                var actions = [];
                actions.push(
                  '<a class="btn btn-success btn-xs ' +
                    editFlag +
                    '" href="javascript:void(0)" onclick="$.operate.edit(\'' +
                    row.id +
                    '\')"><i class="fa fa-edit"></i>编辑</a> '
                );
                actions.push(
                  '<a class="btn btn-info btn-xs ' +
                    viewFlag +
                    '" href="javascript:void(0)" onclick="$.operate.view(\'' +
                    row.id +
                    '\')"><i class="fa fa-eye"></i>查看</a> '
                );
                actions.push(
                  '<a class="btn btn-danger btn-xs ' +
                    removeFlag +
                    '" href="javascript:void(0)" onclick="$.operate.remove(\'' +
                    row.id +
                    '\')"><i class="fa fa-remove"></i>删除</a>'
                );
                return actions.join("");
              },
            },
          ],
        };
        $.table.init(options);
      });
    </script>

    <!-- 视频播放模态框 -->
    <div id="videoModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">视频播放</h4>
          </div>
          <div class="modal-body">
            <video id="videoPlayer" width="100%" height="400" controls>
              您的浏览器不支持视频播放。
            </video>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      // 播放视频
      function playVideo(videoSrc) {
        $("#videoPlayer").attr("src", videoSrc);
        $("#videoModal").modal("show");
      }
    </script>
  </body>
</html>
